<template>
  <!-- vue3.0 模板 -->
  <div class="home"></div>
  <div :user="user" :msg="msg"></div>
</template>
<script lang="ts">
//这里使用搭配 TypeScript语法使用 Vue
//Vue3原生语法格式
//import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
export default {
  name: "xxModel", //定义组件的名称
  components: {
    
  },
  props:[user,msg],
  // props: {
  //   //定义组件的对外暴露的属性，通过外部调用组件时，向组件内传递参数及对象   
  //   danmuku: Array, //弹幕库数据，传参是数组
  //   resource: String, //视频资源地址
  // },
  setup(props) {//vue3定义组件变量在setup()中，替换vue2的data，如果二者同时存在，这vue3的setup优先级高于vue2的data
    //定义组件内的属性,组件内属性调用方式使用生命周期关键字this 如：this.age
    console.log(props);
    return {
        key:1,
        options : {
        resource: {//视频源
          360: {
            name: "标清",
            type: "mp4",
            url: "http://upfile.myfz.fun/uploads%2F2022%2F09%2F24%2Fge4ZfU9g_137649199_u2-1-208.mp4",  //后期用这个代替，从父亲组件传参数，url:this.resource,
          },
        },
        danmaku: {//弹幕
          open: true,
          data: "",
        },
      }
    };
  },
  created() {
    //组件初始化时创建默认属性
  },
  mounted() {
    //同样也是组件初始化时使用，mounted方法会在页面完全加载后进行DOM相关的操作，如果使用created，有时初始化效果会失效，一般建议初始化使用mounted
  },
  methods: {
    //定义初始化方法
    initPlayer() {
      
    },
    onSubmit() {
      //定义一个事件和方法
      console.log("定义方法");
    },
  },
};

</script>
<style scoped>
</style>